<template>
	<view class="result">
		<image class="cover" :src="dataList.img" mode="aspectFill"></image>
		<view class="container">
			<view class="header">
				<view class="roof">
					<view class="le">
						<view v-if="dataList.group!==null">{{dataList.group}}组 -</view>
						<view>{{dataList.title}}</view>
						<view>Photo by @{{dataList.realName}}</view>
					</view>
					<view class="ri">
						<view class="score">
							<view :style="{color:!dataList.is_promotion?'#000':''}">{{dataList.score}}</view>
							<view>score</view>
						</view>
						<view class="rank"
							:style="{backgroundColor:!dataList.is_promotion?'rgba(111, 111, 111, 100)':''}">
							{{dataList.is_promotion?"已晋级":"未晋级"}}
						</view>
					</view>
				</view>

				<view class="mark">
					<view class="item">
						<view>投票分</view>
						<view>{{dataList.votes_score}}</view>
					</view>
					<view class="item">
						<view>评审分</view>
						<view>{{dataList.review_score}}</view>
					</view>
				</view>
				<view class="introduce">
					<view>作品简介</view>
					<view>{{dataList.content}}</view>
				</view>
			</view>
			<view class="scroll_box">
				<view class="title">
					<view :style="{background:color}"></view>
					同组晋级情况
				</view>
				<view class="table">
					<view class="table_hr">
						<view>编号</view>
						<view>选手姓名</view>
						<view>投票分</view>
						<view>评审分</view>
						<view>总分</view>
						<view>晋级情况</view>
					</view>
					<view class="scroll">
						<!-- 	<view class="table_td" v-for="(item,index) in dataList.works_list" :key="item.no">
							<view>{{item.no<10?0+item.no:item.no}}</view>
							<view>{{item.title}}</view>
							<view>{{item.score}}</view>
							<view
								:style="{background:item.is_promotion?color:'','boxShadow':item.is_promotion?'0upx 0upx 4upx 0upx'+color:'',color:item.is_promotion?'#fff':''}">
								{{item.is_promotion?"晋级":"未晋级"}}
							</view>
						</view> -->
						<view class="table_td" v-for="(item,index) in dataList.works_list" :key="item.no">
							<view>{{item.no<10?0+item.no:item.no}}</view>
							<view>{{item.realName}}</view>
							<view>{{item.votes_score}}</view>
							<view>{{item.review_score}}</view>
							<view>{{item.score}}</view>
							<view
								:style="{background:item.is_promotion?color:'','boxShadow':item.is_promotion?'0upx 0upx 4upx 0upx'+color:'',color:item.is_promotion?'#fff':''}">
								{{item.is_promotion?"晋级":"未晋级"}}
							</view>
						</view>
					</view>

				</view>
			</view>
			<view class="rule_box">
				<view class="title">
					<view :style="{background:color}"></view>
					评审规则
				</view>
				<view class="rule_con">
					<text :class="{'active':!isPread}">
						{{dataList.review_rules}}
					</text>
					<view class="spread" v-if="!isPread" @click="isPread=true">
						<image src="../../static/image/spread.png"></image>
						<view>展开</view>
					</view>
				</view>
			</view>
			<view v-if="dataList.is_promotion">
				<view class="certificate">
					<view class="title">
						<view :style="{background:color}"></view>
						获奖证书
					</view>
					<view class="bor">
						<image src="@/static/image/bg.jpg"></image>
						<view class="name">{{dataList.realName}}：</view>
						<view class="works">{{dataList.certificate_text}}
						</view>
					</view>
					<view class="receive" @click="headleGetCertificate"
						:style="{color:color,'border': '2upx solid'+color}">领取证书</view>
				</view>
				<view class="footer">
					<!-- 	<view :style="{background:color,'boxShadow': '0upx 0upx 4upx 0upx'+color}" @click="headleOutside">
						报名决赛
					</view> -->
					<view @click="headleOutside" :style="{'boxShadow': '0upx 0upx 4upx 0upx'+color,'color':color}">报名决赛
					</view>
					<view @click="headleState(1)" :style="{background:color,'boxShadow': '0upx 0upx 4upx 0upx'+color}">
						领取电子版</view>
					<view @click="headleState(0)" :style="{background:color,'boxShadow': '0upx 0upx 4upx 0upx'+color}">
						领取纸质版</view>

				</view>
			</view>

			<view class="not" v-else>
				<view class="title">
					<view :style="{background:color}"></view>
					参赛证明
				</view>
				<view class="picture">
					<image :src="img"></image>
					<view class="content">
						<view>兹证明 {{dataList.realName}}</view>
						<view>参与了本届青年摄影大赛，作品审核通过并获得初赛参与资格。体现了热爱摄影，热爱艺术的生活态度，资以鼓励，望继续加油，拍出更好的作品。</view>
					</view>
				</view>
				<view class="save" :style="{color:color,'border': '2upx solid'+color}" @click="drawCanvas">保存证明</view>
				<view class="recommend">推荐参与</view>
				<swiper :autoplay="true" :interval="3000" :duration="1000" :circular="true">
					<swiper-item v-for="(item,index) in dataList.ad" :key="index" @click="handerSwiperNav(item.url)">
						<image :src="item.img"></image>
					</swiper-item>
				</swiper>
			</view>
		</view>

		<!-- 海报 -->
		<view class="main">
			<view class="content">
				<canvas class="canvas" canvas-id="cardPoster" :style="[posterStyle]"></canvas>
			</view>
			<popup :show="show" type="middle" @close="handlerShow">
				<view class="poster-img">
					<image class="img" :src="posterImg" mode="widthFix" />
					<view :style="{color}">长按保存参赛证明</view>
				</view>
			</popup>
		</view>
		<view class="moadl" v-if="showModal">
			<view class="moadl_box">
				<text>
					报名方式①：如已领取纸质版证书，在决赛通知书（奖品中包含）上扫码报名即可
					报名方式②：如未领取纸质版证书，届时将会发短信通知报名入口，请耐心等候
					
					决赛时间：预计2月中旬，具体时间以短信通知为准。
				</text>
				<view class="btn" @click="showModal=false">我已知晓</view>
			</view>
		</view>
	</view>
</template>

<script>
	// import {
	// 	saveImageToPhotosAlbum,
	// 	showToast
	// } from '@/uni_modules/sakura-canvas/js_sdk/util'
	import Draw from '@/uni_modules/sakura-canvas/js_sdk/draw'
	export default {
		data() {
			return {
				showModal: false,
				isPread: false,
				color: null,
				dataList: {},
				Info: null,
				// 海报
				posterStyle: {
					width: '10px',
					height: '10px'
				},
				posterImg: '',
				show: false,
				content: 'uView的目标是成为uni-app生态最优秀的UI框架',

				img: '/static/image/prove.png',
			}
		},
		onLoad(option) {
			this.Info = option
			this.getGoodsList(option)
			this.color = uni.getStorageSync('color')

			this.$nextTick(() => {
				this.createdDraw()
			})
		},
		methods: {

			// 获取数据
			getGoodsList(option) {
				this.$myRequesy({
					url: 'chaxun/result',
					data: {
						id: option.id,
						phone: option.phone
					}
				}).then(res => {
					if (res.code === 0) {
						this.color = res.data.color
						this.dataList = res.data
					}
				})
			},
			// 领取证书
			headleGetCertificate() {
				uni.navigateTo({
					url: '../credential/index?id=' + this.Info.id + '&phone=' + this.Info.phone + '&state=1'
				})
			},
			// 跳转外部链接
			headleOutside() {
				this.showModal = true
				// location.href = 'http://bisaifang.mikecrm.com/GRw1sd7'
			},

			// 电子版或者纸质版
			headleState(state) {
				uni.navigateTo({
					url: '../credential/index?id=' + this.Info.id + '&phone=' + this.Info.phone + '&state=' + state
				})
			},

			//轮播图跳转外部链接
			handerSwiperNav(url) {
				location.href = url
			},

			// 创建draw绘制对象
			createdDraw() {
				this.draw = new Draw({
					width: 690,
					height: 488,
					company: 'rpx',
					_this: this,
					canvasId: 'cardPoster',
				})
			},
			// 绘制内容
			async drawCanvas() {
				let {
					draw,
					img,
				} = this
				let res = await draw.createdSharePoster(({
					ctxObj,
					style
				}) => {
					let {
						width,
						height
					} = ctxObj
					this.posterStyle = style
					// 距离x轴的距离
					let offsetX = 25
					// 商品图
					let goodsImg = {
						type: 'image',
						drawType: 'rect',
						src: img,
						r: 30,
						color: 'pink',
						callBack: (before) => {
							let {
								sx,
								w,
								sy
							} = before
							return {
								w: 690,
								h: 488
							}
						}
					}

					let goodsTitle = {
						type: 'text',
						text: '参与了本届青年摄影大赛，作品审核通过并获得初赛参与资格。体现了热爱摄影，热爱艺术的生活态度，资以鼓励，望继续加油，拍出更好的作品。',
						font: {
							size: 22
						},
						line: {
							height: 30,
						},
						callBack: (before) => {
							let {
								sx,
								w,
								ey
							} = before
							return {
								w: 484,
								x: sx + 102,
								y: 240
							}
						}
					}

					// 选手名字
					let goodsPrice = {
						type: 'text',
						text: '兹证明  ' + this.dataList.realName,
						font: {
							size: 22
						},
						callBack: (before) => {
							let {
								sx,
								w,
								ey
							} = before
							return {
								w: 300,
								x: sx,
								y: 200
							}
						}
					}
					return [goodsImg, goodsTitle, goodsPrice]
				})
				if (!res.success) return
				this.posterImg = res.data
				this.show = true
			},
			// 显示或隐藏海报
			handlerShow() {
				this.show = !this.show
			}
		}
	}
</script>

<style lang="scss" scoped>
	.result {
		.cover {
			width: 100%;
			height: 572upx;
		}

		.container {
			position: relative;
			top: -40upx;
			background-color: #fff;
			border-radius: 40upx 40upx 0px 0px;
			padding-top: 40upx;
			box-sizing: border-box;
			padding-bottom: 284upx;

			.header {
				margin: 40upx 40upx 40upx 60upx;

				.roof {
					display: flex;
					justify-content: space-between;
					margin-bottom: 20upx;

					.le {
						color: rgba(25, 28, 36, 100);
						font-size: 36upx;
						font-weight: 600;

						view:nth-child(2) {
							margin: 10upx 0upx 20upx;
						}

						view:last-child {
							color: rgba(25, 28, 36, 0.50);
							font-size: 24upx;
							font-weight: 500;
						}
					}

					.ri {
						margin-top: -20upx;

						.score {
							position: relative;
							bottom: -18upx;
							right: -8upx;
							width: 160upx;
							height: 110upx;
							border-radius: 16upx 16upx 0px 0px;
							background-color: rgba(255, 255, 255, 100);
							font-size: 28upx;
							text-align: center;
							box-shadow: 2upx 4upx 10upx 0px rgba(25, 28, 36, 0.15);
							color: rgba(25, 28, 36, 0.35);
							font-size: 24upx;

							view:first-child {
								color: rgba(255, 85, 85, 100);
								font-size: 42upx;
								font-weight: 600;
							}
						}

						.rank {
							width: 180upx;
							height: 92upx;
							line-height: 113upx;
							border-radius: 16upx;
							background-color: rgba(255, 85, 85, 100);
							text-align: center;
							box-shadow: 0px 2upx 6upx 0px rgba(25, 28, 36, 0.35);
							color: rgba(255, 255, 255, 100);
							font-size: 30upx;
						}
					}
				}

				.mark {
					display: flex;
					color: rgba(25, 28, 36, 100);
					font-size: 30upx;
					margin-bottom: 40upx;

					.item {
						display: flex;

						view:first-child {
							margin-right: 16upx;
						}

						view:last-child {
							color: rgba(255, 126, 39, 100);
							font-weight: 600;
						}
					}

					.item:first-child {
						margin-right: 38upx;
					}
				}

				.introduce {
					color: rgba(25, 28, 36, 0.50);
					font-size: 26upx;
					margin-right: 10upx;
					padding-bottom: 40upx;
					border-bottom: 2upx solid rgba(240, 240, 240, 100);

					view:first-child {
						color: rgba(25, 28, 36, 100);
						font-size: 28upx;
						margin-bottom: 20upx;
						font-weight: 600;

					}
				}
			}

			.scroll_box {
				margin: 0upx 60upx 40upx;
				padding-bottom: 40upx;
				border-bottom: 2upx solid rgba(240, 240, 240, 100);

				.table {
					width: 630upx;
					border-radius: 24upx;
					background-color: rgba(251, 251, 251, 100);
					color: rgba(16, 16, 16, 100);
					font-family: Arial;
					padding: 30upx;
					box-sizing: border-box;

					.table_hr {
						display: flex;
						justify-content: space-between;
						font-size: 24upx;
						color: rgba(25, 28, 36, 0.50);
						margin-bottom: 30upx;
						// view:first-child {
						// 	color: rgba(25, 28, 36, 0.50);
						// }

						// view:nth-child(2) {
						// 	margin: 0upx 90upx 0upx 40upx;
						// }

						// view:nth-child(3) {
						// 	margin-right: 52upx;
						// }
					}

					.scroll {
						width: 100%;

						.table_td {
							display: flex;
							align-items: center;
							font-size: 24upx;
							margin-bottom: 20upx;
							color: rgba(25, 28, 36, 100);

							view:first-child {
								width: 40upx;
								margin-right: 42upx;
							}

							view:nth-child(2) {
								margin-right: 15upx;
								width: 120upx;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}

							view:nth-child(3) {
								width: 37upx;
							}

							view:nth-child(4) {
								margin: 0upx 60upx;
								width: 37upx;
							}

							view:nth-child(5) {
								margin-right: 30upx;
								width: 37upx;
							}

							view:last-child {
								width: 90upx;
								height: 44upx;
								line-height: 44upx;
								border-radius: 30upx;
								color: rgba(255, 255, 255, 100);
								font-size: 22upx;
								text-align: center;
								border: 2upx solid rgba(0, 0, 0, 0.05);
								box-sizing: border-box;
								background-color: rgba(255, 255, 255, 100);
								color: rgba(25, 28, 36, 0.60);
							}
						}

						.table_td:last-child {
							margin-bottom: 0upx;
						}
					}
				}

			}
		}

		.rule_box {
			margin: 0upx 60upx;

			.rule_con {
				margin-bottom: 40upx;

				text {
					width: 100%;
					color: rgba(48, 48, 48, 100);
					font-size: 26upx;
				}

				.active {
					display: -webkit-box;
					/**对象作为伸缩盒子模型展示**/
					-webkit-box-orient: vertical;
					/**设置或检索伸缩盒子对象的子元素的排列方式**/
					-webkit-line-clamp: 3;
					/**显示的行数**/
					overflow: hidden;
					/**隐藏超出的内容**/
				}
			}



			.spread {
				margin-top: 20upx;
				display: flex;
				justify-content: center;
				align-items: center;
				color: rgba(25, 28, 36, 0.35);
				font-size: 28upx;

				image {
					width: 40upx;
					height: 40upx;
				}
			}
		}

		.certificate {
			margin: 0upx 60upx;
			border-top: 2upx solid rgba(240, 240, 240, 100);
			padding-top: 40upx;

			.bor {
				position: relative;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 630upx;
				height: 450upx;
				border-radius: 16upx;
				background-color: rgba(244, 128, 104, 100);
				box-shadow: 0px 16upx 24upx 0px rgba(0, 0, 0, 0.1);

				image {
					width: 598upx;
					height: 422upx;
				}

				view {
					position: absolute;
					color: rgba(38, 38, 38, 100);
					font-size: 18upx;
				}

				.name {
					top: 132upx;
					left: 106upx;
					font-size: 20upx;
				}

				.works {
					text-indent: 36upx;
					top: 176upx;
					width: 430upx;

				}
			}

			.receive {
				text-align: center;
				margin-top: 30upx;
				width: 630upx;
				height: 90upx;
				line-height: 90upx;
				border-radius: 100upx;
				font-size: 30upx;
				font-weight: 600;
				box-sizing: border-box;
			}
		}

		.footer {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			height: 130upx;
			border-radius: 24upx 24upx 0px 0px;
			background-color: rgba(255, 255, 255, 100);
			justify-content: space-around;
			text-align: center;
			box-shadow: 0px -6upx 18upx 0px rgba(0, 0, 0, 0.05);

			view {
				height: 90upx;
				width: 230upx;
				border-radius: 10px;
				display: flex;
				justify-content: center;
				align-items: center;
				font-weight: 600;
				color: #fff;
			}

			view:first-child {
				width: 170upx;
				border-radius: 20upx;
			}





			// view {
			// 	width: 690upx;
			// 	height: 90upx;
			// 	line-height: 90upx;
			// 	border-radius: 100upx;
			// 	background-color: rgba(255, 126, 39, 100);
			// 	color: rgba(255, 255, 255, 100);
			// 	font-size: 30upx;
			// 	text-align: center;
			// 	box-shadow: 0px 0px 4upx 0px rgba(255, 126, 39, 100);
			// }
		}

		.not {
			margin: 40upx 60upx;

			.picture {
				width: 630upx;
				height: 444upx;
				position: relative;

				image {
					width: 100%;
					height: 100%;
					border-radius: 0;
				}

				.content {
					position: absolute;
					top: 55%;
					left: 50%;
					transform: translate(-50%, -50%);
					color: rgba(38, 38, 38, 100);
					font-size: 22upx;
					width: 484upx;

					view:first-child {
						margin-bottom: 10upx;
					}
				}
			}

			.save {
				width: 630upx;
				height: 90upx;
				line-height: 90upx;
				border-radius: 100upx;
				font-size: 30upx;
				text-align: center;
				margin: 36upx 0upx 40upx;
				font-weight: 600;
			}

			.recommend {
				position: relative;
				display: flex;
				justify-content: center;
				align-items: center;
				color: rgba(25, 28, 36, 100);
				font-size: 30upx;
				margin-bottom: 30upx;
			}

			.recommend::before {
				content: "";
				position: absolute;
				left: 0upx;
				top: 50%;
				transform: translateY(-50%);
				width: 220upx;
				height: 2upx;
				background-color: rgba(240, 240, 240, 100);
			}

			.recommend::after {
				content: "";
				position: absolute;
				right: 0upx;
				top: 50%;
				transform: translateY(-50%);
				width: 220upx;
				height: 2upx;
				background-color: rgba(240, 240, 240, 100);
			}

			image {
				width: 100%;
				height: 240upx;
				border-radius: 20upx;
			}

		}



		.title {
			color: rgba(38, 38, 38, 100);
			font-weight: 600;
			margin-bottom: 30upx;
			display: flex;
			align-items: center;

			view {
				margin-right: 20upx;
				width: 8upx;
				height: 32upx;
			}
		}

		.canvas {
			position: fixed;
			top: -99999999999rpx;
			left: -99999999999rpx;
			z-index: -99999999999;
			opacity: 0;
		}

		.poster-img {
			width: 630rpx;
			height: 444upx;
			height: auto;
			margin: 0 auto;

			.img {
				width: 100%;
				height: 100%;
			}

			view {
				background-color: #fff;
				margin-top: 30upx;
				padding: 20upx;
				border-radius: 20upx;
				text-align: center;
				font-size: 15px;
			}
		}

		.moadl {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: rgba(0, 0, 0, 0.5);

			.moadl_box {
				position: relative;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				padding: 50upx 30upx  30upx;
				width: 596upx !important;
				background-color: #fff;
				border-radius: 20upx;

				text {
					background-color: #fff;
					font-size: 24upx;

				}

				.btn {
					
					padding-top: 20upx;
					margin-top: 30upx;
					border-top: 2upx solid #eee;
					text-align: center;
					color: rgb(41, 121, 255);
				}
			}


		}

	}
</style>
